<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>星空Starry Sky</title>

    <!-- Bootstrap Core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="__CDN__/assets/css/index.css" rel="stylesheet">

    <!-- Plugin CSS -->
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <!--<script src="//cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>-->
    <!--<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->
</head>

<body id="page-top">

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!--<span style="color: #000;position: absolute;padding-top: 15px;padding-left: 15px;"><b>星空</b></span>-->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">
                <span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
            </button>
            <!--<a class="navbar-brand page-scroll" href="#page-top"><img src="__CDN__/assets/img/logo1.png" style="width:200px;" alt="">PanGu</a>-->

                <div style="margin-top: 20px;color:#00a0e9;margin-left: 20px;"><b>{:__('Starlit Sky')}</b></div>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-menu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="{:url('index/index')}" target="_blank">{:__('Home')}</a></li>
                <li><a href="https://bear71vr.nfb.ca/" target="_blank">{:__('Store')}</a></li>
                <li><a href="http://icondrop.net/" target="_blank">{:__('Services')}</a></li>
                <li><a href="http://jandan.net/" target="_blank">{:__('jiandan')}</a></li>
                <li><a href="http://obliterate.me/" target="_blank">{:__('tuya')}</a></li>
                <li><a href="https://bear71vr.nfb.ca/" target="_blank">{:__('Forum')}</a></li>
                {if condition="$config['language'] eq 'en' "}
                <li><a href="?lang=zh-cn" style="text-transform:capitalize">En|中文</a></li>
                {else /}
                <li><a href="?lang=en" style="text-transform:capitalize"> En|中文</a></li>
                {/if}

                <li class="dropdown">
                    {if $user}
                    <!--<a href="{:url('user/index')}" class="dropdown-toggle" data-toggle="dropdown" style="padding-top: 10px;height: 50px;">-->
                        <!--<span class="avatar-img"><img src="{$user.avatar}" alt=""></span>-->
                    <!--</a>-->

                    <a href="{:url('user/index')}" class="dropdown-toggle" data-toggle="dropdown">

                        <div style="width: 20px;height: 20px;background-color:#e8ecf3;border-radius:50px;">
                            <img style="background-color:#e8ecf3;width: 20px;height: 20px;border-radius:10px" src="" alt="">
                        </div>
                    </a>
                    {else /}
                    <a href="{:url('user/index')}" class="dropdown-toggle" data-toggle="dropdown">{:__('User center')} <b class="caret"></b></a>
                    {/if}
                    <ul class="dropdown-menu">
                        {if $user}
                        <li><a href="{:url('user/index')}"><i class="fa fa-user-circle"></i>{:__('User center')}</a></li>
                        <li><a href="{:url('user/profile')}"><i class="fa fa-user-o"></i>{:__('Profile')}</a></li>
                        <li><a href="{:url('user/changepwd')}"><i class="fa fa-key"></i>{:__('Change password')}</a></li>
                        <li><a href="{:url('user/logout')}"><i class="fa fa-sign-out"></i>{:__('Sign out')}</a></li>
                        {else /}
                        <li><a href="{:url('user/login')}"><i class="fa fa-sign-in"></i> {:__('Sign in')}</a></li>
                        <li><a href="{:url('user/register')}"><i class="fa fa-user-o"></i> {:__('Sign up')}</a></li>
                        {/if}

                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!--首页头部-->
<header style="overflow: hidden;">
    <style>
        /* Demo Buttons Style */
        .codrops-demos {
            font-size: 0.8em;
            text-align:center;
            position:absolute;
            z-index:99;
            width:96%;
        }
        .codrops-demos a {
            display: inline-block;
            margin: 0.35em 0.1em;
            padding: 0.5em 1.2em;
            outline: none;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            border-radius: 2px;
            font-size: 110%;
            border: 2px solid transparent;
            color:#fff;
        }
        .codrops-demos a:hover,
        .codrops-demos a.current-demo {
            border-color: #383a3c;
        }
    </style>
    <canvas style="z-index:-1;position:absolute;" id="canvas" width="100%" height="637"></canvas>
    <script>
        "use strict";
        var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                w = canvas.width = window.innerWidth,
                h = canvas.height = window.innerHeight,

                hue = 217,
                stars = [],
                count = 0,
                maxStars = 1200;
        var canvas2 = document.createElement('canvas'),
                ctx2 = canvas2.getContext('2d');
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2,
                gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
        gradient2.addColorStop(0.025, '#fff');
        gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
        gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
        gradient2.addColorStop(1, 'transparent');
        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill();
        // End cache
        function random(min, max) {
            if (arguments.length < 2) {
                max = min;
                min = 0;
            }
            if (min > max) {
                var hold = max;
                max = min;
                min = hold;
            }
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function maxOrbit(x, y) {
            var max = Math.max(x, y),
                    diameter = Math.round(Math.sqrt(max * max + max * max));
            return diameter / 2;
        }
        var Star = function() {
            this.orbitRadius = random(maxOrbit(w, h));
            this.radius = random(60, this.orbitRadius) / 12;
            this.orbitX = w / 2;
            this.orbitY = h / 2;
            this.timePassed = random(0, maxStars);
            this.speed = random(this.orbitRadius) / 900000;
            this.alpha = random(2, 10) / 10;
            count++;
            stars[count] = this;
        }
        Star.prototype.draw = function() {
            var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
                    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
                    twinkle = random(10);

            if (twinkle === 1 && this.alpha > 0) {
                this.alpha -= 0.05;
            } else if (twinkle === 2 && this.alpha < 1) {
                this.alpha += 0.05;
            }
            ctx.globalAlpha = this.alpha;
            ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
            this.timePassed += this.speed;
        }
        for (var i = 0; i < maxStars; i++) {
            new Star();
        }
        function animation() {
            ctx.globalCompositeOperation = 'source-over';
            ctx.globalAlpha = 0.8;
            ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
            ctx.fillRect(0, 0, w, h)
            ctx.globalCompositeOperation = 'lighter';
            for (var i = 1, l = stars.length; i < l; i++) {
                stars[i].draw();
            };
            window.requestAnimationFrame(animation);
        }
        animation();
    </script>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="header-content">
                    <div class="header-content-inner">
                        <h1 style="font-weight: bold;">{:__('Broad Starlit Sky')}</h1>
                        <h3>{:__('When looking up at the starry sky, we are full of longing for the vast universe.')}</h3>
                        <a href="http://www.zefrank.com/scribbler/scribblertoo/" target="_blank" class="btn btn-outline btn-xl page-scroll">{:__('Sign Ups')}</a>
                        <a href="{:url('user/login')}" target="_blank" class="btn btn-outline btn-xl page-scroll">{:__('Go to Know')}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<section id="features" class="features">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="section-heading">
                    <h2>{:__('Features')}</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="container-fluid">
                    <div class="row">
                        <style>
                            .feature-item:hover{background-color: #0D93BF;}
                        </style>
                        <div class="col-md-4">
                            <div class="feature-item" style="background-image: url(__STATIC__/sky/1.jpg);background-size:350px 210px;">
                                <!--<i class="icon-user text-primary"></i>-->
                                <h3>{:__('Auth')}</h3>
                                <p class="text-muted">天放晴了，从窗口望出去，一块透明的蓝天，像一张丝手帕，蓝天上停留着一些细碎而洁白的云块，像是纱巾上的花朵。</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item" style="background-image: url(__STATIC__/sky/2.jpg);background-size:350px 210px;">
                                <!--<i class="icon-screen-smartphone text-primary"></i>-->
                                <h3>{:__('Responsive')}</h3>
                                <p class="text-muted">天晴得像一张蓝纸，几片薄薄的白云，像被阳光晒化了似的，随风缓缓浮游着。</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item" style="background-image: url(__STATIC__/sky/3.jpg);background-size:350px 210px;">
                                <!--<i class="icon-present text-primary"></i>-->
                                <h3>{:__('Languages')}</h3>
                                <p class="text-muted">东方泛起了鱼肚似的淡白色，接着，渐渐光亮起来；那白色像水一般漫向天空，一会儿整个天空变得透明晶亮。</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item" style="background-image: url(__STATIC__/sky/4.jpg);background-size:350px 210px;">
                                <!--<i class="icon-layers text-primary"></i>-->
                                <h3>{:__('Module')}</h3>
                                <p class="text-muted">听我的歌 飞进天空林 飞越天空 飞向那一轮圆月</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item" style="background-image: url(__STATIC__/sky/5.jpg);background-size:350px 210px;">
                                <!--<i class="icon-docs text-primary"></i>-->
                                <h3>{:__('CRUD')}</h3>
                                <p class="text-muted">我常常看见他窝在书店角落安静地看书，完全不理会周遭的世界。</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item" style="background-image: url(__STATIC__/sky/6.jpg);background-size:350px 210px;">
                                <!--<i class="icon-puzzle text-primary"></i>-->
                                <h3>{:__('Extension')}</h3>
                                <p class="text-muted">我几次朝夜幕伸出手去，指尖毫无所触，那小小的光点总是同指尖保持一点点不可触及的距离</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="cta">
    <div class="cta-content">
        <div class="container">
            <h2>镶嵌在天幕，<br>闪闪发着光。</h2>
            <a href="#" class="btn btn-outline btn-xl page-scroll">{:__('Contribution')}</a>
        </div>
    </div>
    <div class="overlay"></div>
</section>

<footer>
    <div class="container">
        <p>&copy; 2018 Houroad. All Rights Reserved.</p>
        <ul class="list-inline">
            <li>
                <a href="#">{:__('Gitee')}</a>
            </li>
            <li>
                <a href="#">{:__('Github')}</a>
            </li>
            <li>
                <!--<a href="#">{:__('QQ group')}</a>-->
                <a href="#">{:__('QQ')}：810086688</a>
            </li>
            <li>
                <!--<a href="#">{:__('QQ group')}</a>-->
                <a href="#">TEL:17600693506</a>
            </li>
        </ul>
    </div>
</footer>

<!-- jQuery -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="//cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script>


</body>

</html>